<!DOCTYPE html>
<html  lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta th:content="${session.csrf_token}" name="csrf-token"/>
    <!--360浏览器优先以webkit内核解析-->
    <title>首页</title>
    <link rel="shortcut icon" href="favicon.ico">
    <link href="../static/css/bootstrap.min.css" th:href="@{/css/bootstrap.min.css}" rel="stylesheet"/>
    <link href="../static/css/font-awesome.min.css" th:href="@{/css/font-awesome.min.css}" rel="stylesheet"/>
    <link href="../static/css/style.min.css" th:href="@{/css/style.min.css}" rel="stylesheet"/>
</head>

<body class="gray-bg">
    <div class="wrapper wrapper-content">
        <div class="row">
            <div class="col-sm-6">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <h5>设备类型统计</h5>
                    </div>
                    <div class="ibox-content">
                        <div class="panel-collapse collapse in">
                            <div class="flot-chart">
                                <div class="flot-chart-content" id="type_chart"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-sm-6">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <h5>在线情况统计</h5>
                    </div>
                    <div class="ibox-content">
                        <div class="panel-collapse collapse in">
                            <div class="flot-chart">
                                <div class="flot-chart-content" id="online_chart"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script th:src="@{/js/jquery.min.js}"></script>
    <script th:src="@{/js/bootstrap.min.js}"></script>
    <script th:src="@{/assets/js/echarts.min.js}"></script>
    <div th:include="include :: footer"></div>
    <script th:inline="javascript">
        $(function () {
            getTypeChart();
            getOnlineChart();
        })

        /**
         * 设备类型统计
         */
        function getTypeChart(){
            var pieChart = echarts.init(document.getElementById('type_chart'));
            var datas=[];
            pieChart.showLoading();//加载动画

            $.ajax({
                url: ctx + 'report/device/type_chart',
                async: true,
                type: "POST",
                beforeSend: function (xhr, settings) {
                    var csrftoken = $('meta[name=csrf-token]').attr('content');
                    if ($.common.equalsIgnoreCase(settings.type, "POST")) {
                        xhr.setRequestHeader("X-CSRF-Token", csrftoken);
                    }
                },
                success: function (json) {
                    for (var i = 0; i < json.data.length; i++) {
                        var data = json.data[i];
                        datas.push({name: data.deviceType, value: data.deviceCount});
                    }
                    pieChart.hideLoading();//隐藏加载动画
                    pieChart.clear();//清空原来图表
                    pieChart.setOption({
                        tooltip: {
                            trigger: 'item',
                            formatter: "{a} <br/>{b} : {c} ({d}%)"
                        },
                        legend: {
                            top: '2%',
                            left: 'center'
                        },
                        series: [{
                            name: '设备类型统计',
                            type: 'pie',
                            radius: ['40%', '70%'],
                            avoidLabelOverlap: false,
                            data: datas,
                            itemStyle: {
                                borderRadius: 10,
                                borderColor: '#fff',
                                borderWidth: 2
                            }
                        }]
                    });
                }
            });
        }

        /**
         * 设备在线状态统计
         */
        function getOnlineChart(){
            /*标准*/
            var pieChart = echarts.init(document.getElementById('online_chart'));
            var datas=[];
            pieChart.showLoading();//加载动画

            $.ajax({
                url: ctx + 'report/device/online_chart',
                async: true,
                type: "POST",
                beforeSend: function (xhr, settings) {
                    var csrftoken = $('meta[name=csrf-token]').attr('content');
                    if ($.common.equalsIgnoreCase(settings.type, "POST")) {
                        xhr.setRequestHeader("X-CSRF-Token", csrftoken);
                    }
                },
                success: function (json) {
                    var sum = 0;
                    var online = 0;
                    for (var i = 0; i < json.data.length; i++) {
                        var data = json.data[i];
                        sum = parseInt(sum) + parseInt(data.deviceCount);
                        if(data.onlineStatus === 'online') {
                            online = data.deviceCount;
                            datas.push({name: '在线', value: data.deviceCount, itemStyle: {color: 'green'}});
                        } else if(data.onlineStatus === 'offline') {
                            datas.push({name: '离线', value: data.deviceCount, itemStyle: {color: 'red'}});
                        } else {
                            datas.push({name: '未接电', value: data.deviceCount, itemStyle: {color: 'purple'}});
                        }
                    }
                    pieChart.hideLoading();//隐藏加载动画
                    pieChart.clear();//清空原来图表
                    pieChart.setOption({
                        tooltip: {
                            trigger: 'item',
                            formatter: "{a} <br/>{b} : {c} ({d}%)"
                        },
                        legend: {
                            top: '2%',
                            left: 'center'
                        },
                        series: [{
                            name: '在线统计',
                            type: 'pie',
                            radius: ['40%', '70%'],
                            avoidLabelOverlap: false,
                            data: datas,
                            label: {
                                normal: {
                                    show: true,
                                    position: 'center',
                                    formatter:function (argument) {
                                        var html='在线数/总数\r\n\r\n'+online + '/' + sum;
                                        return html;
                                    },
                                    textStyle:{
                                        fontSize: 12,
                                        color:'#00c0ef'
                                    }
                                }
                            },
                            itemStyle: {
                                borderRadius: 10,
                                borderColor: '#fff',
                                borderWidth: 2
                            }
                        }]
                    });
                }
            });
        }
    </script>
</body>
</html>
